<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "UTF-8">
	<title>Progress Bar</title>
	<!--rel 此属性命名链接文档与当前文档的关系。-->
	<link rel = "stylesheet" href = "style.css">
	<script src = "js/script.js"></script>
	<!--引入vue-->
	<script src = "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--<template> HTML 元素是一种用于保存HTML 的机制，该HTML 不会在页面加载时立即呈现，但可以在运行时使用 JavaScript 进行实例化-->
<template id = "xcprogress">
	<div class = "xcprogress">
		<div class = "xcprogress-bar" :style = "{ 'width': `${value}%` }">
			<span class = "xcprogress-bar-value">{{value}}%</span>
		</div>
	</div>
</template>
<div id = "app">
	<xc-progress :value = 'value' @change="change"></xc-progress>
</div>

</body>
</html>
